{% extends "article/base.html" %}

{% load staticfiles %}

{% block title %}
article column
{% endblock %}

{% block content %}

    <div>
        <p class="text-right"><button class="btn btn-primary" id="add_column" onclick="add_column()">add column</button></p>
        <table class="table table-hover">
            <tr>
                <td>序号</td>
                <td>栏目名称</td>
                <td>操作</td>
            </tr>
            {% for column in  columns  %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ column.column }}</td>
                    <td>
                        <a href="javascript:" name="edit" onclick="edit_column(this, {{ column.id }})">
                            <span class="glyphicon glyphicon-pencil"></span>
                        </a>
                        <a href="javascript:" onclick="del_column(this, {{ column.id }})" name="delete">
                            <span class="glyphicon glyphicon-trash" style="margin-left: 20px;"></span>
                        </a>
                    </td>
                </tr>

            {% empty %}
                <p>还没有设置栏目</p>

            {% endfor %}

        </table>
    </div>
</div>

    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/layer.js' %}"></script>
    <script>
        function add_column(){
            var index = layer.open({
                type:1,
                skin:"layui-layer-rim",
                area:["400px", "200px"],
                title:"新增栏目",
                content:'<div class="text-center" style="margin-top:20px"><p>请输入新的栏目名称</p><p><input id="id_column" type="text"></p></div>',
                btn:['确定', '取消'],
                yes:function (index, layero) {
                    column_name = $("#id_column").val();
                    $.ajax({
                        url:'{% url "article:article_column" %}',
                        type:'POST',
                        data:{
                            "column":column_name
                        },
                        success:function (e) {
                            if(e=='1'){
                                parent.location.reload();
                                layer.msg("添加成功");
                            }else{
                                layer.msg("此栏目已经存在");
                            }
                        }
                    })

                },
                btn2:function (index, layero) {
                    layer.close(index);
                }
            })
        }
        
        function edit_column(the, column_id) {
            var name= $(the).parents("tr").children("td").eq(1).text();
            var index = layer.open({
                type:1,
                skin:"layui-layer0rim",
                area:["400px", "200px"],
                title:"编辑栏目名称",
                content:'<div class="text-center" style="magin-top:28px"><p>栏目名称</p><p><input type="text" id="new_name" value="'+name+'"></p></div>',
                btn:["确定", "取消"],
                yes:function (index, layero) {
                    new_name = $("#new_name").val();
                    $.ajax({
                        url:"{% url 'article:rename_article_column' %}",
                        type:"POST",
                        data:{"column_id":column_id, "column_name":new_name},
                        success:function (e) {
                            if(e == "1"){
                                parent.location.reload();
                                layer.msg("编辑成功");
                            }else{
                                layer.msg("新的名称没有保存,修改失败")
                            }
                        },
                    });
                }
            })
        }

        function del_column(the, column_id) {
            var name= $(the).parents("tr").children("td").eq(1).text();
            var index = layer.open({
                type:1,
                skin:"layui-layer0rim",
                area:["400px", "200px"],
                title:"删除栏目",
                content:'<div class="text-center" style="magin-top:28px"><p>栏目名称</p><p>'+name+'</p></div>',
                btn:["确定", "取消"],
                yes:function (index, layero) {
                    new_name = $("#new_name").val();
                    $.ajax({
                        url:"{% url 'article:del_article_column' %}",
                        type:"POST",
                        data:{"column_id":column_id},
                        success:function (e) {
                            if(e == "1"){
                                parent.location.reload();
                                layer.msg("删除成功");
                            }else{
                                layer.msg("删除失败")
                            }
                        },
                    });
                }
            })
        }


    </script>
{% endblock %}